(async ()=>{
    // "use strict"; // 全局严格模式
    document.documentElement.style.fontSize = (document.body.clientWidth / 750) + 'px'


    let bannerBox = document.querySelector('#bannerBox')
    let banner = bannerBox.querySelector('.banner')
    banner.innerHTML = ''//清空之前图片
    let instructs = bannerBox.querySelector('.instructs')
    instructs.innerHTML = ''

    let bannerData = await (await fetch('http://localhost:3001/index/banners')).json()

    let bannerImgs = [],instructDivs = []

    
    for(let i = 0; i < bannerData.length; i ++){
        ((i)=>{
            let data = bannerData[i]
            //插入图片
            let _banner = document.createElement('img')
            _banner.src = 'http://localhost:3001' + data.img
            _banner.onclick = ()=>{
                window.open(data.url)
            }
            banner.appendChild(_banner)
            bannerImgs.push(_banner)

            //插入指示器
            let instruct = document.createElement('div')
            instruct.className = 'instruct'
            instruct.onclick = () => {
                bannerPlay(i)
            }
            instructs.appendChild(instruct)
            instructDivs.push(instruct)
        })(i)
    }
    let cloneFirst = bannerImgs[0].cloneNode()
    banner.appendChild(cloneFirst)

    //设置banner长度
    banner.style.width = 676 * (bannerData.length + 1) + 'rem'

    let bannerIndex = 0
    let bannerTimer = 0
    function bannerPlay(i){
        instructDivs[bannerIndex].style.background = '#fff'
        bannerIndex = i
        //修改新的焦点状态
        banner.style.marginLeft = '-' + i * 676 + 'rem'
        instructDivs[bannerIndex == bannerImgs.length ? 0 : bannerIndex].style.background = '#ff0000'
        if(bannerTimer){
            clearTimeout(bannerTimer)
            bannerTimer = 0
        }
        if(bannerIndex == bannerImgs.length){
            setTimeout(()=>{
                bannerIndex = 0
                i = 0
                banner.className = 'banner'
                banner.style.marginLeft = '0rem'
                setTimeout(() => {
                    banner.className = 'banner bannerAnmate'
                },100)
            },1000)
        }
        //开始计时轮播
        
        bannerTimer = setTimeout(()=>{
            bannerPlay(i + 1)
        },5000)
    }
    bannerPlay(0)

    async function getcategorys() {
        let res = await fetch('http://localhost:3001/index/categorys');
        // console.log(res);
    
        let json = await res.json();
        // console.log(json);
    
        let container = document.getElementById('categoryContainer');
        json.forEach(item => {
            let itemDiv = document.createElement('div');
            itemDiv.className = 'item';
    
            let img = document.createElement('img');
            img.src = 'http://localhost:3001'+item.img;
            img.alt = item.title;
            itemDiv.appendChild(img);
    
            let title = document.createElement('p');
            title.textContent = item.title;
            itemDiv.appendChild(title);
    
            container.appendChild(itemDiv);
        });
    }
    getcategorys();

    //放内容元素
    let recommends = document.querySelector('#recommends')
    //提示信息元素
    let recommendMsg = document.querySelector('#recommendMsg')
    //  当前页        总数      已加载缓存
    let pageNum = 1,total = 0,recommendDatas = []
    //加载下一页
    recommendMsg.addEventListener('click',()=>{
        //已全部加载就什么都不做了
        if(total <= recommendDatas.length) return
        //获取下一页数据
        pageNum ++
        loadRecommends()
    })
    //获取数据
    async function loadRecommends(){
        recommendMsg.innerHTML = '加载中...'
        //获取数据
        let res = await (await fetch(`http://localhost:3001/index/recommends?pageNum=${pageNum}`)).json()
        total = res.total
        //插入获取的数据
        for(let i = 0; i < res.rows.length; i ++){
            let recommend = document.createElement('div')
            let recommendData = res.rows[i]
            //已获取数据加入缓存
            recommendDatas.push(recommendData)
            //构建内容
            recommend.className = 'recommend'
            recommend.innerHTML = `
            <img src="http://localhost:3001${recommendData.img}" />
            <a href="http://localhost:3001${recommendData.url}" style="display:block;">
                <div class="one">${recommendData.title}</div>
                 <div>
                     <div>查看详情></div>
                 </div>
            </a>
            `
            //展示新增数据
            recommends.appendChild(recommend)
        }
        //判断提示信息内容
        recommendMsg.innerHTML = total > recommendDatas.length ? '点击加载更多' : '没有更多数据了'
    }

    loadRecommends()
})()